import React, { useState, useEffect, lazy, useRef, useCallback } from "react"
import { Card, Table, Modal, Input, Space } from "antd"

import { getList, getHourList } from "@/api"
import Icons from "@/utils/icons"
const Btn = lazy(() => import("@/components/linekButton"))

export default function Category() {
  const [titles, setTitle] = useState("一级分类列表")
  const [dataList, setDataList] = useState([])
  const [pages, setPages] = useState({ page: 1, pageSize: 5 })
  const [totals, setTotal] = useState(0)
  const [loading, setLoading] = useState(false)
  const [visible, setVisible] = useState(0)
  const [confirmLoading, setConfirmLoading] = useState(false)
  const [ids, setIds] = useState("")
  const [values, setValues] = useState("")
  const ipt1 = useRef(null)
  const columns = [
    {
      title: "名称",
      dataIndex: "title",
      key: "title",
    },
    {
      title: "操作",
      dataIndex: "operation",
      key: "operation",
      width: 150,
      render: (_, record) => {
        return (
          <Space >
            <Btn onClick={() => updates(record)}>修改分类</Btn>
            {titles === "一级分类列表" ? (
              <Btn onClick={() => looks(record)}>查看子分类</Btn>
            ) : null}
          </Space>
        )
      },
    },
  ]
  const pagination = {
    current: pages.page,
    pageSize: pages.pageSize,
    total: parseInt(totals),
    showSizeChanger: true,
    onChange: (v, t) => {
      if (t !== pages.pageSize) v = 1
      setPages({ ...pages, page: v, pageSize: t })
    },
  }
  const getDataList = useCallback(
    async (id) => {
      setLoading(true)
      const { data: res } = id
        ? await getHourList({ ...pages, venueId: id })
        : await getList(pages)
      const { records, total } = res
      setTotal(total)
      setDataList(records)
      setLoading(false)
    },
    [pages]
  )

  const updates = useCallback(({ title, id }) => {
    setValues(title)
    setVisible(1)
    setIds(id)
    setTimeout(() => {
      ipt1.current.focus()
    }, 200)
  }, [])

  const goto = useCallback(() => {
    getDataList()
    setTitle("一级分类列表")
  }, [getDataList])
  const looks = useCallback(
    ({ title, id }) => {
      setTitle(
        <span>
          <Btn onClick={goto}>一级分类列表</Btn>
          <Icons style={{ margin: "0 10px" }} type="icon-youjiantou" />
          <span>{title}</span>
        </span>
      )
      getDataList(id)
    },
    [getDataList, goto]
  )
  const handleOk = useCallback(() => {
    const value = ipt1.current.input.value
    if (value !== values) {
      setConfirmLoading(true)
      const newDataList = dataList.map((item) => {
        if (item.id === ids) {
          item.title = value
        }
        return item
      })
      setDataList(newDataList)
      setConfirmLoading(false)
    }
    setVisible(0)
  }, [dataList, ids, values])
  useEffect(() => {
    getDataList()
    return () => {}
  }, [pages, getDataList])

  return (
    <div>
      <Card
        title={titles}
      >
        <Table
          rowKey={(record) => record.id + "-" + record.title} // 指定表格key的值
          dataSource={dataList}
          loading={loading}
          columns={columns.map((item) => {
            const fun = () => ({
              style: {
                overflow: "hidden",
                textOverflow: "ellipsis",
                whiteSpace: "nowrap",
              },
            })
            item.onCell = fun
            return item
          })}
          pagination={pagination}
        ></Table>
      </Card>
      {/* 修改 */}
      <Modal
        title="修改分类"
        visible={visible === 1}
        onOk={handleOk}
        confirmLoading={confirmLoading}
        onCancel={() => setVisible(0)}
        okText="修改"
        cancelText="取消"
      >
        <Input
          ref={ipt1}
          key={values}
          defaultValue={values}
          placeholder="请输入分类名称"
        />
      </Modal>
      {/* 新增 */}
      <Modal
        title="新增内容"
        visible={visible === 2}
        onOk={handleOk}
        confirmLoading={confirmLoading}
        onCancel={() => setVisible(0)}
        okText="新增"
        cancelText="取消"
      >
        <p>新增内容</p>
      </Modal>
    </div>
  )
}
